<template>
  <div>
    <a-layout
      id="components-layout-demo-custom-trigger"
      style="background: #fff"
    >
      <a-layout-sider
        :style="{ overflow: 'auto', height: height }"
        class="beauty-scroll"
      >
        <a-card size="small" :bordered="false" class="eip-admin-card-small">
          <div slot="title">
            <a-space :size="14">
              <a-dropdown-button>
                <a-icon type="plus" /><span>新增项</span>
                <a-menu slot="overlay">
                  <a-menu-item @click="groupAdd">
                    <a-icon type="snippets" />分组
                  </a-menu-item>
                  <a-menu-item @click="worksheetAdd()">
                    <a-icon type="table" />工作表
                  </a-menu-item>
                  <a-menu-item @click="iframeAdd()">
                    <a-icon type="pic-right" />嵌套页
                  </a-menu-item>
                  <a-menu-item> <a-icon type="control" />自定义</a-menu-item>
                </a-menu>
              </a-dropdown-button>
              <a-tooltip>
                <template slot="title"> 刷新 </template>
                <a-button @click="initMenu" icon="reload"></a-button>
              </a-tooltip>
            </a-space>
          </div>
          <a-spin :spinning="menu.loading">
            <a-menu mode="inline">
              <template v-for="(item, index) in setting.menus">
                <a-menu-item
                  v-if="item.children.length == 0"
                  :key="'main' + index"
                  @click="menuClick(item)"
                >
                  <div>
                    <a-icon
                      v-if="item.slots.icon"
                      :type="item.slots.icon"
                    /><span>{{ item.title }}</span
                    ><a-icon
                      style="margin-left: 10px"
                      v-if="!item.slots.extend.isShowMenu"
                      type="eye-invisible"
                    />
                    <a-dropdown>
                      <a-icon
                        type="ellipsis"
                        style="position: absolute; top: 12px; right: 8px"
                      ></a-icon>
                      <a-menu slot="overlay">
                        <a-menu-item
                          v-if="item.slots.extend.appMenuType == 1"
                          @click="worksheetAdd(item)"
                        >
                          <a-icon type="table" />工作表
                        </a-menu-item>
                        <a-menu-item
                          v-if="item.slots.extend.appMenuType == 1"
                          @click="iframeAdd(item)"
                        >
                          <a-icon type="pic-right" />嵌套页
                        </a-menu-item>
                        <a-menu-item v-if="item.slots.extend.appMenuType == 1">
                          <a-icon type="control" />自定义</a-menu-item
                        >
                        <a-menu-divider
                          v-if="item.slots.extend.appMenuType == 1"
                        />
                        <a-menu-item @click="menuEdit(item)">
                          <a-icon type="edit" />修改
                        </a-menu-item>
                        <a-menu-item @click="menuCopy(item)">
                          <a-icon type="copy" />复制</a-menu-item
                        >
                        <a-sub-menu key="test">
                          <template slot="title">
                            <a-icon type="swap" />移动
                          </template>
                          <a-menu-item>3rd menu item</a-menu-item>
                          <a-menu-item>4th menu item</a-menu-item>
                        </a-sub-menu>
                        <a-menu-item @click="menuShow(item)">
                          <a-icon
                            :type="
                              item.slots.extend.isShowMenu
                                ? 'eye-invisible'
                                : 'eye'
                            "
                          />{{ item.slots.extend.isShowMenu ? "隐藏" : "显示" }}
                        </a-menu-item>
                        <a-menu-divider />
                        <a-menu-item @click="menuDel(item)">
                          <div style="cursor: pointer; color: red">
                            <a-icon type="delete" />
                            删除
                          </div>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>
                  </div>
                </a-menu-item>
                <sub-menu
                  v-else
                  :key="'main0' + index"
                  :menu-info="item"
                  @menuClick="menuClick"
                  @iframeAdd="iframeAdd"
                  @worksheetAdd="worksheetAdd"
                  @edit="menuEdit"
                  @copy="menuCopy"
                  @del="menuDel"
                  @show="menuShow"
                />
              </template>
            </a-menu>

            <a-empty v-if="setting.menus.length == 0" />
          </a-spin>
        </a-card>
      </a-layout-sider>
      <a-layout>
        <a-layout-content
          :style="{
            margin: '0 5px',
            background: '#fff',
            minHeight: '280px',
          }"
        >
          <build ref="build" :mode="1"></build>

          <a-result
            v-if="result"
            title="请选择左侧菜单，或点击新增项"
            sub-title=""
          >
            <template #icon>
              <img src="/images/empty.png" />
            </template>
            <template #extra>
              <a-dropdown>
                <a-button type="primary"
                  ><a-icon type="plus"></a-icon> 新增项
                </a-button>
                <a-menu slot="overlay">
                  <a-menu-item @click="groupAdd()">
                    <a-icon type="snippets" />分组
                  </a-menu-item>
                  <a-menu-item @click="worksheetAdd()">
                    <a-icon type="table" />工作表
                  </a-menu-item>
                  <a-menu-item @click="iframeAdd()">
                    <a-icon type="pic-right" />嵌套页
                  </a-menu-item>
                  <a-menu-item> <a-icon type="copy" />自定义</a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>
          </a-result>
        </a-layout-content>
      </a-layout>
    </a-layout>

    <group
      ref="group"
      v-if="setting.view.group.visible"
      :visible.sync="setting.view.group.visible"
      :title="setting.view.group.title"
      :menuId="setting.view.group.menuId"
      :copy="setting.view.group.copy"
      @save="groupSave"
    ></group>

    <worksheet
      ref="worksheet"
      v-if="setting.view.worksheet.visible"
      :visible.sync="setting.view.worksheet.visible"
      :title="setting.view.worksheet.title"
      :menuId="setting.view.worksheet.menuId"
      :copy="setting.view.worksheet.copy"
      :parentId="setting.view.worksheet.parentId"
      :parentName="setting.view.worksheet.parentName"
      @save="worksheetSave"
    ></worksheet>

    <ifr
      ref="iframe"
      v-if="setting.view.iframe.visible"
      :visible.sync="setting.view.iframe.visible"
      :title="setting.view.iframe.title"
      :menuId="setting.view.iframe.menuId"
      :copy="setting.view.iframe.copy"
      :parentId="setting.view.iframe.parentId"
      :parentName="setting.view.iframe.parentName"
      @save="iframeSave"
    ></ifr>
  </div>
</template>
<script>
import group from "./group";
import worksheet from "./worksheet";
import ifr from "./iframe";
import build from "./build";
import {
  menuQuery,
  menuDel,
  menuShow,
} from "@/services/system/agile/app/index";
import subMenu from "./components/menu/submenu";
import { deleteConfirm } from "@/utils/util";
export default {
  components: {
    subMenu,
    group,
    worksheet,
    ifr,
    build,
  },
  data() {
    return {
      height: this.eipHeaderHeight() - 10 + "px",
      bodyStyle: {
        padding: 4,
      },
      result: true,
      setting: {
        view: {
          group: {
            visible: false,
            menuId: null,
            copy: false,
            title: "",
          },

          worksheet: {
            visible: false,
            menuId: null,
            title: null,
            parentId: null,
            parentName: null,
            copy: false,
          },

          iframe: {
            visible: false,
            menuId: null,
            title: null,
            parentId: null,
            parentName: null,
            copy: false,
          },

          build: {
            visible: false,
            menuId: null,
            title: null,
            menu: null,
          },
        },

        menus: [],
      },

      menu: {
        loading: true,
      },
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    this.initMenu();
  },
  methods: {
    /**
     * 添加组
     */
    groupAdd() {
      this.setting.view.group.visible = true;
      this.setting.view.group.menuId = null;
      this.setting.view.group.copy = false;
      this.setting.view.group.title = "新增组";
    },

    /**
     * 编辑
     */
    menuEdit(item) {
      //判断类型
      if (item.slots.extend.appMenuType == 1) {
        this.setting.view.group.visible = true;
        this.setting.view.group.menuId = item.key;
        this.setting.view.group.copy = false;
        this.setting.view.group.title = "编辑组-" + item.title;
      }
      if (item.slots.extend.appMenuType == 2) {
        this.setting.view.worksheet.visible = true;
        this.setting.view.worksheet.menuId = item.key;
        this.setting.view.worksheet.copy = false;
        this.setting.view.worksheet.title = "编辑工作表-" + item.title;
      }
      if (item.slots.extend.appMenuType == 3) {
        this.setting.view.iframe.visible = true;
        this.setting.view.iframe.menuId = item.key;
        this.setting.view.iframe.copy = false;
        this.setting.view.iframe.title = "编辑嵌套页-" + item.title;
      }
    },

    /**
     * 菜单显示
     * @param {*} item
     */
    menuShow(item) {
      let that = this;
      menuShow({ id: item.key }).then((result) => {
        if (result.code == that.eipResultCode.success) {
          that.initMenu();
        }
        that.$message.destroy();
        that.$message.success(result.msg);
      });
    },

    /**
     * 分组保存成功
     */
    groupSave() {
      this.initMenu();
    },

    /**
     *添加工作表
     */
    worksheetAdd(item) {
      if (item) {
        this.setting.view.worksheet.parentId = item.key;
        this.setting.view.worksheet.parentName = item.title;
        this.setting.view.worksheet.menuId = null;
        this.setting.view.worksheet.copy = false;
        this.setting.view.worksheet.visible = true;
        this.setting.view.worksheet.title = "新增工作表";
      } else {
        this.setting.view.worksheet.parentId = null;
        this.setting.view.worksheet.parentName = null;
        this.setting.view.worksheet.menuId = null;
        this.setting.view.worksheet.copy = false;
        this.setting.view.worksheet.visible = true;
        this.setting.view.worksheet.title = "新增工作表";
      }
    },

    /**
     * 复制
     * @param {*} item
     */
    menuCopy(item) {
      //判断类型
      if (item.slots.extend.appMenuType == 1) {
        this.setting.view.group.visible = true;
        this.setting.view.group.menuId = item.key;
        this.setting.view.group.copy = true;
        this.setting.view.group.title = "复制组-" + item.title;
      }
      if (item.slots.extend.appMenuType == 2) {
        this.setting.view.worksheet.visible = true;
        this.setting.view.worksheet.menuId = item.key;
        this.setting.view.worksheet.copy = true;
        this.setting.view.worksheet.title = "复制工作表-" + item.title;
      }
      if (item.slots.extend.appMenuType == 3) {
        this.setting.view.iframe.visible = true;
        this.setting.view.iframe.menuId = item.key;
        this.setting.view.iframe.copy = true;
        this.setting.view.iframe.title = "复制嵌套页-" + item.title;
      }
    },

    /**
     * 添加工作表保存成功
     */
    worksheetSave() {
      this.initMenu();
    },

    /**
     *添加框架页
     */
    iframeAdd(item) {
      if (item) {
        this.setting.view.iframe.parentId = item.key;
        this.setting.view.iframe.parentName = item.title;
        this.setting.view.iframe.menuId = null;
        this.setting.view.iframe.copy = false;
        this.setting.view.iframe.visible = true;
        this.setting.view.iframe.title = "新增嵌套页";
      } else {
        this.setting.view.iframe.parentId = null;
        this.setting.view.iframe.parentName = null;
        this.setting.view.iframe.menuId = null;
        this.setting.view.iframe.copy = false;
        this.setting.view.iframe.visible = true;
        this.setting.view.iframe.title = "新增嵌套页";
      }
    },

    /**
     * 添加框架页保存成功
     */
    iframeSave() {
      this.initMenu();
    },

    /**
     * 菜单点击
     * @param {*} item
     */
    menuClick(item) {
      this.result = false;
      if (item.slots.extend.appMenuType != 1) {
        this.$refs.build.reloadSetting(item.slots.extend);
      }
    },

    /**
     * 树删除
     */
    menuDel(item) {
      let that = this;
      deleteConfirm(
        "确定删除【" + item.title + "】",
        function () {
          that.$message.loading("删除中...");
          menuDel({ id: item.key }).then((result) => {
            if (result.code == that.eipResultCode.success) {
              that.initMenu();
            }
            that.$message.destroy();
            that.$message.success(result.msg);
          });
        },
        that
      );
    },

    /**
     * 初始化菜单
     */
    initMenu() {
      let that = this;
      that.menu.loading = true;
      menuQuery().then((result) => {
        that.setting.menus = result.data;
        that.menu.loading = false;
      });
    },
  },
};
</script>
    <style lang="less" scoped>
/deep/ .ant-layout-header {
  line-height: 48px !important;
  height: 48px !important;
}
.avatar {
  color: #fff;
}
#components-layout-demo-custom-trigger .trigger:hover {
  color: @primary-color;
}
.header-item:hover {
  background-color: @primary-color;
}

.pointer {
  cursor: pointer;
}

/deep/ .ant-tabs-bar {
  margin: 0 !important;
}
.ant-dropdown-menu {
  width: 150px;
}
.ant-layout-content {
  background: #f5f5f9;
}
/deep/ .ant-layout-sider {
  background: #fff !important;
}

/deep/ .ant-menu-inline {
  border-right: 0 !important;
}
</style>
    